<template>
    <div>
        <div class="bac-container-none-padding">
            <div class="col-right-top">
                        <span class="top-title">
                            我发出的留言
                        </span>
                <div class="top-operate">
                </div>

            </div>
        </div>
        <!--列表-->
        <div class="bac-container" v-loading="loading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading">
            <ul class="message-list">
                <li v-for="(message,index) in messageList" :key="index" class="message-item">
                    <div class="message-avatar" @click="openUserHome(message.userId)">
                        <el-avatar :size="40" :src="message.userHeadUrl"></el-avatar>
                    </div>
                    <div class="message-data">
                        <div class="user-name" @click="openUserHome(message.userId)"><span>{{message.userRealName}}</span>&nbsp;
                            <el-tag type="danger" size="mini" effect="plain" v-if="message.userType == 1">v</el-tag>
                        </div>
                        <div class="message-data-item message-context">
                            <el-link @click="openUserHome(message.userId)">{{message.content}}
                            </el-link>
                        </div>
                        <div class="message-data-item message-time">
                            {{message.createTime | formatDate}}
                        </div>
                    </div>
                </li>

            </ul>
            <div v-if="messageList.length == 0" class="empty-message">
                <p>没有留言，去查找更多的商友吧！</p>
                <el-button round size="small" @click="$router.push({path:'user-search-list'})">找人脉</el-button>
            </div>

        </div>

        <el-pagination
                @current-change="changPage"
                hide-on-single-page
                background
                layout="prev, pager, next"
                :page-size="params.size"
                :total="params.count">
        </el-pagination>
    </div>
</template>
<script>
    import {formatDate} from "@/utils/dateUtil"

    export default {
        filters: {
            formatDate(val) {
                return formatDate(val)
            }
        },
        data: function () {
            return {
                loading: false,
                messageList: [],
                params: {
                    page: 1,
                    size: 5,
                    type: 1,
                    isAll:1
                }

            }
        },
        methods: {
            initData() {
                this.loading = true;
                this.$post("/user/message/queryPageByOwn", this.params).then((res) => {
                    this.messageList = res.data.rows;
                    this.params.count = res.data.count;
                    this.loading = false;
                }).catch(err => {
                    this.loading = false;
                })
            },
            selectAll(val) {
                this.initData();
            },
            changPage(page) {
                this.params.page = page;
                this.initData();
            },
            openDynamicDetails(id, itemId) {
                this.$router.push({
                    path: "dynamic-details",
                    query: {id: id, itemId: itemId}
                })
            },
            openUserHome(userId) {
                this.$router.push({
                    path: "home",
                    query: {id: userId}
                })
            }
        },
        mounted() {
            this.initData();
        }
    }
</script>
<style>

</style>